<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div xmlns="http://www.w3.org/1999/html">
  <h2 openlmis-message="label.equipment.service.contract"></h2>

  <form ng-submit="save()" id="create-service-type" name="contractForm" novalidate>
    <table>
      <tr>
        <td style="vertical-align: top;padding: 10px">
          <div>
            <div ng-show="isNew" class="form-row clearfix">
              <div class="form-cell">
                <label openlmis-message="label.program"></label>

                <div class="form-field">
                  <select ng-model="current.programId">
                    <option value="{{program.id}}" ng-repeat="program in programs">{{program.name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-row clearfix">
              <div class="form-cell">
                <label openlmis-message="label.equipment.maintenance.service.vendor"></label>

                <div class="form-field">
                  <select ng-model="current.vendorId">
                    <option value="{{vendor.id}}" ng-repeat="vendor in vendors">{{vendor.name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="name">
                  <span openlmis-message="label.equipment.contract.identifier"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <input ng-model="current.identifier" id="name" name="name" type="text" maxlength="200"
                         ng-required="true"/>
                  <span class="field-error" ng-show="contractForm.name.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>

            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="startDate">
                  <span openlmis-message="label.equipment.contract.start.date"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <input ng-change="blurDateFields();"
                         ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}"
                         ui-date-format="yy-dd-mm"
                         ng-model="current.startDate"
                         id="startDate"
                         name="startDate"
                         ng-required="true"/>
                  <span class="field-error" ng-show="contractForm.startDate.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>

            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="endDate">
                  <span openlmis-message="label.equipment.contract.end.date"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <input ng-change="blurDateFields();"
                         ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}"
                         ui-date-format="yy-dd-mm"
                         ng-model="current.endDate"
                         id="endDate"
                         name="endDate"
                         ng-required="true"/>
                  <span class="field-error" ng-show="contractForm.endDate.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>

            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="description">
                  <span openlmis-message="label.equipment.contract.description"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <textarea style="width:100%" ng-model="current.description" name="description" id="description"
                            cols="100" ng-required="true"></textarea>
                  <span class="field-error" ng-show="contractForm.description.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>

            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="terms">
                  <span openlmis-message="label.equipment.contract.terms"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <textarea style="width:100%" ng-model="current.terms" name="terms" id="terms" maxlength="50"
                            ng-required="true"></textarea>
                  <span class="field-error" ng-show="contractForm.terms.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>

            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="coverage">
                  <span openlmis-message="label.equipment.contract.coverage"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <textarea style="width:100%" ng-model="current.coverage" name="coverage" id="coverage"
                            ng-required="true"></textarea>
                  <span class="field-error" ng-show="contractForm.coverage.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>

            <div class="form-row clearfix">
              <div class="form-cell">
                <label for="contractDate">
                  <span openlmis-message="label.equipment.contract.date"></span>
                  <span class="label-required">*</span>
                </label>

                <div class="form-field">
                  <input
                    ng-change="blurDateFields();"
                    ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}"
                    ui-date-format="yy-dd-mm"
                    ng-model="current.contractDate" name="contractDate" id="contractDate" cols="100"
                    ng-required="true"/>
                  <span class="field-error" ng-show="contractForm.contractDate.$error.required && showError"
                        openlmis-message="missing.value"></span>
                </div>
              </div>
            </div>
          </div>
        </td>

        <td style="vertical-align: top;padding:10px">
          <div ng-show="!isNew">
            <div class="form-row clearfix">
              <div class="form-cell">
                <label openlmis-message="label.equipment.contract.service.types"></label>
              </div>
              <div class="form-field">
                <label ng-repeat="type in current.serviceTypes"><input type="checkbox" ng-model="type.isActive"/>
                  {{type.name}}</label>
              </div>
            </div>
            <div class="form-row clearfix">
              <div class="form-cell">
                <label openlmis-message="label.equipment.contract.equipments.covered"></label>
              </div>
              <div class="form-field">
                <label ng-repeat="type in current.equipments"><input type="checkbox" ng-model="type.isActive"/>
                  {{type.name}}</label>
              </div>
            </div>
            <div class="panel">
              <div class="header-nav">
                <span openlmis-message="label.equipment.contract.facilities.covered"></span>
                <input type="text" ng-model="facilityName"/>
              </div>
              <div class="content-body">

                <div class="form-row clearfix">
                  <div class="form-field">
                    <div style="height: 200px; max-height: 200px; overflow-y: scroll">
                      <label ng-repeat="facility in current.facilities | filter : facilityName">
                        <input type="checkbox" ng-model="facility.isActive">
                        {{facility.name}}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>

    <div form-toolbar id="action_buttons" class="action-buttons">
      <div class="form-cell button-row">
        <input id="saveButton" type="submit" id="save-button" class="btn btn-primary save-button"
               openlmis-message="button.save"/>
        <input id="cancelButton" type="button" class="btn btn-cancel cancel-button" openlmis-message="button.cancel"
               ng-click="cancel()"/>
      </div>

      <div class="toolbar-error" id="saveErrorMsgDiv">
        <span openlmis-message="error" ng-show="error"></span>&nbsp;
        <span ng-show="errorMessage" ng-bind="errorMessage"></span>
      </div>
      <div class="toolbar-success" id="saveSuccessMsgDiv" openlmis-message="message" ng-show="message"></div>
    </div>

  </form>
</div>